<template>
  <div class="register-wrap">
    <div class="ms-title">注册新用户</div>
    <div>
      <el-form class="ms-register" :model="registerForm" ref="registerForm" :rules="rules" label-width="90px"
               label-position="right">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="registerForm.phone" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerForm.password" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="registerForm.confirmPwd" show-password clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="register('registerForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    let checkConfirmPwd = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('确认密码和密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        phone: '',
        username: '',
        password: '',
        confirmPwd: ''
      },
      rules: {
        phone: [
          {required: true, message: '手机号不能为空', trigger: 'blur'},
          {max: 11, min: 11, message: '手机号为11位', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'},
          {max: 10, min: 2, message: '用户名长度为2-10位', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        confirmPwd: [
          {required: true, message: '确认密码不能为空', trigger: 'blur'},
          {validator: checkConfirmPwd, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    register (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (isNaN(this.registerForm.phone)) {
            this.$message.error('手机号只能为数字!')
            return
          }
          for (let i of this.registerForm.username) {
            if (i === ' ') {
              this.$message.error("用户名不能包含空格！")
              return
            }
          }
          for (let i of this.registerForm.password) {
            if (i === ' ') {
              this.$message.error("密码不能包含空格！")
              return
            }
          }
          this.$request.post('/user/reg', {
              "phone": this.registerForm.phone,
              "username": this.registerForm.username,
              "password": this.registerForm.password
          }).then((result) => {
            if (result.code === 200) {
              this.$message.success("注册成功!")
              this.$router.push('/Login')
            } else {
              this.$message.error(result.msg)
            }
          })
        } else {
          this.$message.error("数据不合法！")
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.register-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
}
.ms-title {
  width: 100%;
  padding-top: 30px;
  font-size: 30px;
}

.ms-register {
  margin-top: 30px;
  padding: 50px;
  width: 350px;
  height: 280px;
  border: 1px solid;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}
</style>
